<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
	<head>
		<div th:replace="~{commons/template::style}"></div>

		<title>成绩统计</title>
	</head>

	<body>
		<div th:replace="commons/template::head"></div>

		<div class="container-fluid">
			<div class="row">
				<div th:replace="commons/template::leftSide(active='scoreReport')"></div>
				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
					<form id="form1" method="post" th:action="@{/getScoreReport}">
					<div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
						<div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
							<div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
						</div>
						<div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
							<div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
						</div>
					</div>
					<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
						<h1 class="h2">成绩统计</h1>
						<div class="btn-toolbar mb-2 mb-md-0">
							<div class="btn-group mr-2">
								<input type="submit" class="btn btn-sm btn-outline-secondary" value="查询"></input>
								<button class="btn btn-sm btn-outline-secondary" id="print">打印</button>
							</div>
							<select id="yearId" class="btn btn-sm btn-outline-secondary dropdown-toggle" name="yearId" onchange="change()">
								<option value="">所有学期</option>
								<option value="1">2019-1</option>
								<option value="2">2019-2</option>
								<option value="3">2020-1</option>
								<option value="4">2020-2</option>
							</select>
						</div>
					</div>
					<div class="table-responsive">
						<table class="table table-striped table-sm">
							<thead>
							<tr>
								<div class="row">
									<div class="col-md-1"></div>
									<div class="col-md-1">
										<td align="center">学号</td>
									</div>
									<div class="col-md-1">
										<td align="center">姓名</td>
									</div>
									<div class="col-md-5">
										<td align="center">已考课程</td>
									</div>
									<div class="col-md-1">
										<td align="center">平均分</td>
									</div>
									<div class="col-md-1">
										<td align="center">最高分</td>
									</div>
									<div class="col-md-1">
										<td align="center">最低分</td>
									</div>
									<div class="col-md-1"></div>
								</div>
							</tr>
							</thead>
							<tbody id="t1">
							<tr th:each="info:${pageInfo.getList()}">
								<td align="center" th:text="${info.getStuId()}"></td>
								<td align="center" th:text="${info.getStuName()}"></td>
								<td align="center" th:text="${info.getCourseName()}"></td>
								<td align="center" th:text="${info.getAvg()}"></td>
								<td align="center" th:text="${info.getMax()}"></td>
								<td align="center" th:text="${info.getMin()}"></td>
							</tr>
							</tbody>
						</table>
					</div>
					<div class="row">
						<div class="col-md-3"></div>
						<div class="col-md-1"><button id="prePage" class="btn btn-primary" th:onclick="changePage([[${pageInfo.getPrePage()}]])">上一页</button></div>
						<div class="col-md-1">当前第：<a name="pageNum" id="pageNum" th:text="${pageInfo.getPageNum()}"></a>页</div>
						<div class="col-md-1">总共：<a name="pages" id="pages" th:text="${pageInfo.getPages()}"></a>页</div>
						<div class="col-md-1">共：<a name="total" id="total" th:text="${pageInfo.getTotal()}"></a>条记录</div>
						<div class="col-md-1">
							<select name="pageSize" id="pageSize" onchange="changePage(1)" class="form-control-sm">
								<option value="5" th:selected="${pageInfo.getPageSize()==5}">每页5条</option>
								<option value="10" th:selected="${pageInfo.getPageSize()==10}">每页10条</option>
								<option value="15" th:selected="${pageInfo.getPageSize()==15}">每页15条</option>
								<option value="20" th:selected="${pageInfo.getPageSize()==20}">每页20条</option>
							</select>
						</div>
						<div class="col-md-1">
							<button id="nextPage" class="btn btn-primary" th:onclick="changePage([[${pageInfo.getNextPage()}]])">下一页</button>
						</div>
						<div class="col-md-3"></div>
					</div>
					</form>
				</main>
			</div>
		</div>

		<div th:replace="~{commons/template::script}"></div>

	</body>
<script>
	$("#print").click(function () {
		alert("功能暂未开放！")
	})
	function change() {
		$.ajax({
			url:"getScoreReport",
			data:{yearId:$("#yearId").val()},
			dataType:"json",
			type:"post"
		})
	}
</script>
</html>